import React, { useState } from 'react';
//@ts-ignore
import { DownSquareOutlined, UpSquareOutlined } from '#/utils/antdIcons';
import type { IPublishFQADataType } from '../../type';
import styles from './index.less';

interface IProps {
  /**
   * 数据
   */
  data?: IPublishFQADataType;
  /**
   * 序号
   */
  order?: number;
}

const FileItem = (props: IProps) => {
  const { data, order } = props;
  const [isSpread, setIsSpread] = useState<boolean>(true);

  const onSpread = () => {
    setIsSpread(!isSpread);
  };

  return (
    <div className={styles.container}>
      <div className={styles.order}>{order ?? 0}</div>
      <div className={styles.info}>
        <div className={styles.header}>
          <div className={styles.title}>{data?.title ?? ''} </div>
          <div className={styles.spread} onClick={onSpread}>
            {isSpread ? (
              <UpSquareOutlined className={styles.spreadLogo} />
            ) : (
              <DownSquareOutlined className={styles.spreadLogo} />
            )}
          </div>
        </div>
        {isSpread && <div className={styles.answer}>{data?.content ?? ''} </div>}
      </div>
    </div>
  );
};

export default FileItem;
